import Avatar from '@/asset/avatar.png';
import ErrorComp from '@/components/common/error-comp';
import LeftToRightView from '@/components/common/motion/left-to-right-view';
import QueryImage from '@/components/common/query-image';
import { getSession } from '@/lib/auth';
import { PAGE_NUM, PAGE_SIZE } from '@/lib/constants';
import { shopListRecentlyConversations } from '@/service/query/message';
import { listShopOrdersByPage } from '@/service/query/order';
import dayjs from 'dayjs';
import Link from 'next/link';

export const metadata = {
  title: '商铺端',
};

export const dynamic = 'force-dynamic';

export default async function Page() {
  const session = await getSession();
  if (!session?.user) return <ErrorComp message="用户未登录" />;

  const { result: ordersToAccept, error: ordersToAcceptError } =
    await listShopOrdersByPage({
      page: PAGE_NUM,
      pageSize: PAGE_SIZE,
      status: ['unaccepted'],
    });

  const { result: conversations, error: conversationsError } =
    await shopListRecentlyConversations({ shopUserId: session.user.id });

  return (
    <LeftToRightView>
      <div className="p-5 rounded-lg bg-background min-h-[90vh] space-y-8">
        <h1 className="text-2xl font-bold text-center">RIN 外卖 商铺端</h1>
        <hr className="mx-36" />
        <div className="flex gap-10">
          {[
            {
              url: '/shop/info',
              name: '商铺信息',
            },
            {
              url: '/shop/product',
              name: '外卖管理',
            },
            {
              url: '/shop/order',
              name: '订单管理',
            },
            {
              url: '/shop/message',
              name: '消息管理',
            },
          ].map((items) => (
            <Link key={items.url} href="/shop/info">
              <div className="font-bold text-xl px-10 py-5 border rounded-lg flex items-center gap-2 hover:bg-muted group transition-colors">
                <span className="i-ri-store-line" />
                <span>商铺信息</span>
                <span className="i-ri-arrow-right-s-line group-hover:translate-x-1 transition-all" />
              </div>
            </Link>
          ))}
        </div>
        <div className="flex gap-4">
          <div className="space-y-5 p-5 border rounded-lg flex-1">
            <div className="font-bold text-xl">待接受订单</div>
            <div className="space-y-2">
              {ordersToAcceptError ? (
                <div className="w-full h-full min-h-32 flex items-center justify-center">
                  {ordersToAcceptError.message}
                </div>
              ) : ordersToAccept.data.length > 0 ? (
                ordersToAccept.data.map((order) => (
                  <Link
                    key={order.id}
                    href={`/shop/order/${order.id}`}
                    className="block text-sm hover:bg-muted rounded-lg p-2 transition-colors"
                  >
                    <div className="flex justify-between">
                      <span>
                        收货人：{order.name} 联系电话：{order.phone}
                      </span>
                      <span className="text-muted-foreground">
                        {dayjs(order.createdAt).format('YYYY-MM-DD HH:mm:ss')}
                      </span>
                    </div>
                    <div>收货地址：{order.address}</div>
                  </Link>
                ))
              ) : (
                <div className="w-full h-full min-h-32 flex items-center justify-center">
                  暂无待接受订单
                </div>
              )}
            </div>
          </div>
          <div className="space-y-5 p-5 border rounded-lg flex-1 ">
            <div className="font-bold text-xl">最新用户消息</div>
            <div className="space-y-2">
              {conversationsError ? (
                <div className="w-full h-full min-h-32 flex items-center justify-center">
                  {conversationsError.message}
                </div>
              ) : conversations.length > 0 ? (
                conversations.map((user) => (
                  <Link
                    key={user.id}
                    href={`/shop/message/${user.id}`}
                    className="flex items-center justify-between text-sm hover:bg-muted rounded-lg p-2 transition-colors"
                  >
                    <div className="flex items-center gap-2">
                      <QueryImage
                        imageKey={user.image}
                        defaultImage={Avatar}
                        wrapperClassName="w-10 h-10 rounded-full"
                        imgClassName="w-full h-full rounded-full object-cover"
                      />
                      <span className="">{user.name}</span>
                    </div>
                    <div>
                      立即查看 <span className="i-ri-arrow-right-s-line" />
                    </div>
                  </Link>
                ))
              ) : (
                <div className="w-full h-full min-h-32 flex items-center justify-center">
                  暂无用户消息
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </LeftToRightView>
  );
}
